{% extends "buyer/base.html" %}
{% block title %}
    提交订单
{% endblock %}
{% block style %}
    <script src="/static/buyer/js/jquery.min.js"></script>
    <script src="/static/buyer/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/static/buyer/css/bootstrap.css">
    <link rel="stylesheet" href="/static/buyer/css/footer.css">
    <link rel="stylesheet" href="/static/buyer/css/search.css">
{% endblock %}
{% block ys %}
    <!--导航结束-->
    <div class="container">
    <!--2.搜索框开始-->
    <div class="search">
        <div class="row ">
            <div class="col-lg-5">
                <img src="/static/buyer/images/logo.png" alt="..." class="img-rounded">
                <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;提交订单</span>
            </div>
            <div class="col-lg-6 col-lg-offset-1 search_bar">
                <form action="">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索商品">
                        <span class="input-group-btn">
                    <button class="btn btn-success" style="padding: 6px 50px" type="submit">搜索</button>
                </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    <div class="main">
        <!--收货地址-->
        <div class="panel panel-default ">
            <div class="panel-heading col-lg-12">确认收货地址</div>
            <div class="panel-body">
                <div>
                    北京市 海淀区 东北旺西路8号中关村软件园 （李思 收） 182****7528
                    <a style="margin-left: 500px" class="btn btn-default" href="/buyer/edit_address/"
                       role="button">编辑收货地址</a>
                </div>

            </div>
        </div>
        <!--支付方式-->
        <div class="panel panel-default ">
            <div class="panel-heading col-lg-12">支付方式</div>
            <div class="panel-body">
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" value="option1" checked>
                        <img src="/static/buyer/images/pay/yhk.png" alt="..." class="img-thumbnail">
                    </label>
                    <label>
                        <input type="radio" name="optionsRadios" value="option1">
                        <img src="/static/buyer/images/pay/wx.png" alt="..." class="img-thumbnail">
                    </label>
                    <label>
                        <input type="radio" name="optionsRadios" value="option1">
                        <img src="/static/buyer/images/pay/zfb.png" alt="..." class="img-thumbnail">
                    </label>
                    <label>
                        <input type="radio" name="optionsRadios" value="option1">
                        <img src="/static/buyer/images/pay/yl.png" alt="..." class="img-thumbnail">
                    </label>
                </div>

            </div>
        </div>


        <!--商品列表-->
        <div class="panel panel-default ">
            <div class="panel-heading col-lg-12">商品列表</div>
            <div class="panel-body">
                <table class="table table-bordered table-hover">
                    <tr align="center" valign="middle">
                        <td>序号</td>
                        <td>图片</td>
                        <td>商品名称</td>
                        <td>商品单位</td>
                        <td>商品价格</td>
                        <td>数量</td>
                        <td>小计</td>
                    </tr>
                    {% for order_info in porder.orderinfo_set.all %}
                        <tr align="center" valign="center">
                            <td>{{ forloop.counter }}</td>
                            <td>
                                <img class="img-thumbnail" src="/static/buyer/{{ order_info.goods_picture }}"
                                     width="60px" alt="">
                            </td>
                            <td>{{ order_info.goods_name }}</td>
                            <td>500g</td>
                            <td>{{ order_info.goods_price }}元</td>
                            <td>{{ order_info.goods_num }}</td>
                            <td>{{ order_info.goods_total }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>

        <!--总金额结算-->
        <div class="panel panel-default">
            <div class="panel-heading col-lg-12">总金额结算</div>
            <div class="panel-body">
                <table class="table table-bordered table-hover">
                    <tr align="center" valign="middle">
                        <td>商品件数</td>
                        <td>总金额</td>
                        <td>运费</td>
                        <td>实付款</td>
                    </tr>
                    <tr align="center" valign="center">
                        <td>{{ porder.type_number }}</td>
                        <td>
                            {{ porder.total_price }}
                        </td>
                        <td>10</td>
                        <td>{{ porder.total_price }}</td>
                    </tr>

                </table>
            </div>
        </div>

        <!--提交订单按钮-->
        <div>
            <button type="button" class="btn btn-success col-lg-3 col-lg-offset-9" onclick="buynow()">提交订单</button>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            // 选项卡切换
            $("ul li").on("click", function () {

                //获取索引值
                var index = $(this).index();
                $(".info>div").eq(index).show().siblings().hide();
                console.log($(this)[0]);
                $(this).addClass('active');
                $(this).siblings().removeClass('active');

            });
            // 全部订单超链接
            $('#allorders_link').click(
                function () {
                    alert('xx');
                }
            );
        });
        function buynow() {
            // 获取订单id
            var order_id = {{ porder.id }}
            console.log(order_id);
            // 打开页面
            window.location.href = "/buyer/zfbpay/?order_id=" + order_id;
        }
    </script>
{% endblock %}




